<template>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#262A32"
      text-color="#fff"
      active-text-color="#fff"
      :collapse="collapse"
      router
      :collapse-transition="false"
      
    >
    <el-menu-item index="1">
        <i class="el-icon-menu"></i>
        <span slot="title">管理中心</span>
      </el-menu-item>
      <!-- 循环遍历 -->
      <el-submenu :index="'top'+item.id" v-for="item in menus" :key="item.id">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{item.title}}</span>
        </template>
          <el-menu-item v-for="val in item.children" :key="val.id" :index="val.url">{{val.title}}</el-menu-item>
          
      </el-submenu>
    </el-menu>
</template>

<script>
// 导入vue辅助方法
import {mapState,mapMutations} from 'vuex'
export default {
  data(){
    return {
      //默认需要高亮显示的菜单的index 
      activeIndex:''
    }
  },
  //父向子传值的第二步
  props:['collapse'],
  computed:{
    // 将vuex中的数据映射到组件中
    ...mapState(['menus'])
  },
        methods: {
          // 将vuex中的mapMutations方法映射到组件中
          ...mapMutations(['menusInit']),
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    // 在生命周期中调用
    created(){
      // 初始化菜单 
      const userInfo =JSON.parse(sessionStorage.getItem('userinfo') || '{}')
      // 更新vuex 存储对象中的menus
      this.menusInit(userInfo.menus)
      // 更新默认高亮的导航条
      this.activeIndex=this.$route.path
    }

};
</script>

<style lang='less' scoped>
.el-menu{
    height: calc(100% - 60px);
    text-align: left;
    border-right: 0;
    .is-active{
      background-color: skyblue!important;
    }
}
</style>